<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="stripes" uri="http://stripes.sourceforge.net/stripes.tld" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<fmt:setLocale value="fr"/>
<fmt:setBundle basename="messages" />

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 -->
<title>Photo albums</title>
<style type="text/css">
.folder {
	float: left;
	text-align: center;
	margin : 10px;
	cursor: pointer;
}
#menuContainer {
    display: none;
    margin-bottom: 20px;
}
#photoContainer {
	display: none;
	cursor: pointer;
	margin: auto;
	text-align: center;
}

.navButton {
	text-decoration: underline;
	cursor: pointer;
}

body {
	font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
	font-size: 15px;
    width: 800px;
    background-color: #1C1616;
    color: #ffffff;
    padding-top: 20px;
    padding-left: 20px;
}

</style>
<script type="text/javascript" src="/js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#showFolderLink').click(function() {
		$('#photoContainer').hide();
		$('#navigationInfoDiv').text('');
		$('#folderContainer').show();
		$('#menuContainer').hide();
	});
	$('#prevButton').click(function() {
		showPreviousPhoto();
	});
	$('#nextButton').click(function() {
		showPhoto();
	});
	$('#photoContainer').click(showPhoto);
	
	loadAllFolders();
});

var currentFolderId;
var photos;
var currentPos;
var currentDate;
var total;

function initParam() {
	//currentFolderId = folderId;
	photos = new Array();
	currentPos = -1;
	currentDate = null;
	total = 0;
}

function loadAllFolders() {
	$.ajax({
	url : '/folder?list=',
	dataType : 'json',
	success : function(json) {
		if (json.success) {
			$.each(json.folders, function(i, folder) {
				addFolderDiv(folder);
			});
		}
	}
	});
}

function addFolderDiv(folder) {
	$('<div class="folder" id="folder-' + folder.id + '">' + 
			'<div><img src="/folder?cover=&folder=' + folder.id + '"/></div>' + folder.name + '</div>').appendTo($('#folderContainer'));
	$('#folder-' + folder.id).click(function(elem) {
		currentFolderId = folder.id;
		loadPhotosInFolder();
	});
}

function showPreviousPhoto() {
	if (currentPos == 0) {
		if (photos.length < total) {
			return;
		} else {
			currentPos = total;
		}
	}
	$('#photoImg').attr('src', '/photo?showSlideshow=&photo=' + photos[--currentPos].id);
	$('#navigationInfoDiv').text((currentPos+1) + ' <fmt:message key="photo.of"/> ' + total);
}

function showPhoto() {
	//$('#photoContainer').hide();
	if (currentPos == photos.length-1 && currentPos < total-1) {
		loadPhotos(showPhoto);
		return;
	}
	
	if (currentPos == total) {
		currentPos = -1;
	}

	//var img = new Image();
    //img.src = '/photo?showSlideshow=&photo=' + photos[++currentPos].id;
	//$('#photoContainer').html('<img src="/photo?showSlideshow=&photo=' + photos[currentPos].id + '" width="650"/>');
	$('#photoImg').attr('src', '/photo?showSlideshow=&photo=' + photos[++currentPos].id);
    $('#navigationInfoDiv').text((currentPos+1) + ' <fmt:message key="photo.of"/> ' + total);
	//$('#photoContainer').show();
}

function loadPhotosInFolder() {
	$('#folderContainer').hide();
	$('#menuContainer').show();
	initParam();

	loadPhotos(function() {
		$('#photoContainer').show();
		showPhoto();
	});
}

function loadPhotos(afterLoaded) {
	var url = '/photo?list=&folder=' + currentFolderId;
	if (currentDate != null) {
		url += '&after=' + currentDate;
	}
	$.ajax({
		url : url,
		dataType : 'json',
		success : function(json) {
			if (json.success) {
				total = json.total;
				currentDate = json.after;
				
				$.each(json.photos, function(i, photo) {
					photos.push(photo);
				});
				
				afterLoaded.call();
			}
		}
		});
}
</script>
</head>
<body>
<div id="menuContainer">
<table width="100%"><tr>
  <td><div id="navigationInfoDiv"></div></td>
  <td><div id="showFolderLink" class="navButton"><fmt:message key="return.to.albums"/></div></td>
  <td width="70%" align="right">
    <span id="prevButton" class="navButton"><fmt:message key="photo.previous"/></span> | 
    <span id="nextButton" class="navButton"><fmt:message key="photo.next"/></span>
  </td>
</tr></table>
</div>

<div id="folderContainer"></div>
<div id="photoContainer">
<img id="photoImg"/>
</div>

</body>
</html>